<template>
  <div class="main">
    <!-- 左边盒子 -->
    <div class="left_box">
      <!-- 论坛详情 -->
      <div class="talkInfo">
        <div class="index_image">
          <img :src="talkInfo.indexImage"
               alt="">
        </div>
        <div class="other_info">
          <h3>{{talkInfo.talkName}}</h3>
          <div style="color:gray;">{{talkInfo.summary}}</div>
          <div>帖子总数: {{talkInfo.countPosts}}</div>
          <div>
            <el-button type="primary">我要发贴</el-button>
          </div>
        </div>
      </div>
      <!-- 帖子集合 -->

      <div class="latest_box">
        <div style="padding:10px 0;"> <span style="font-weight:bolder;font-size:20px;color:#f04494;">|</span> <span style="font-size:15px;color:#4e5358;font-weight:bolder;">帖子</span></div>
        <div class="article_box">
          <div class="article_item"
               v-for="(item,index) in posts"
               :key="item.id"
               @click="$router.push({
                path:'PostDetail',
                query:{
                  id:item.id
                }
               })">
            <!-- 图片部分 -->
            <div class="img_box "
                 :style="`background-image: url(${item.image});`">
              <div class="mask"></div>
            </div>
            <!-- 简介部分 -->
            <div class="summary_box">
              <!-- 标题 -->
              <h3>{{item.title}}</h3>
              <div>{{item.summary}}</div>

              <!-- 发布者信息 -->
              <div class="publisher_box">
                <div class="avatar_box">
                  <img :src="item.avatar"
                       style="width: 100%;" />
                </div>
                <div style="margin-left:10px;color:gray;">{{item.nickname}}</div>
                <div style="margin-left: 10px; color:gray;">{{item.createTime.substring(0,10)}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <!-- 右边盒子 -->
    <div class="right_box">
      <div class="pt">
        <div style="font-weight:bolder;color:#e45b6a;padding-bottom:10px;">|推荐帖子</div>
        <div v-for="(item,index) in hotPosts"
             :key="index"
             class="item">
          <div style="font-weight:bolder; color:#d23199;cursor: pointer;">{{item.title}}</div>
          <div style="color:gray;">{{item.createTime.substring(0,10)}}</div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import { getTalkDetail, getPostByTalk, getHotPostBtTalk } from "@/api/talk"
export default {
  data () {
    return {
      talkId: this.$route.query.id,
      talkInfo: {},
      posts: [],//论坛下的所有帖子
      hotPosts: []//该论坛的热门帖子
    }
  },
  methods: {
    getData () {
      getTalkDetail(this.talkId).then(resp => {
        this.talkInfo = resp
      })

      getPostByTalk(this.talkId).then(resp => {
        this.posts = resp.list
        this.posts.map(item => {
          item.image = item.images.split(",")[0]
        })
      })

      getHotPostBtTalk(this.talkId).then(resp => {
        this.hotPosts = resp
      })
    }
  },
  created () {
    this.getData()
  }
}
</script>

<style lang='scss' scoped>
.main {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: auto;

  // 左边盒子
  .left_box {
    height: 100%;
    overflow: auto;
    flex: 3;
    border: 1px solid red;
    box-sizing: border-box;
    margin-right: 20px;
    // 论坛详情
    .talkInfo {
      // height: 200px;
      background-color: #ffffff;
      display: flex;

      .index_image {
        width: 120px;
        border: 1px solid #e1e1e1;
        box-sizing: border-box;
        // margin-left: 5px;
        img {
          width: 100%;
        }
      }

      .other_info {
        margin-left: 15px;
        line-height: 30px;
      }
    }
    // 帖子集合
    // 最新帖子发布部分
    .latest_box {
      // border: 1px solid red;
      // 帖子
      .article_box {
        // overflow: hidden;
        .article_item {
          display: flex;
          // align-items: center;
          margin: 15px 0;
          background-color: rgb(255 255 255 / 45%);
          border-radius: 15px;
          box-sizing: border-box;
          padding: 30px 15px;

          // 图片部分
          .img_box {
            // border: 1px solid blue;
            // flex: 1;
            border-radius: 15px;
            overflow: hidden;
            object-fit: cover;
            width: 200px;
            height: 133px;
            background-size: 150%;
            background-position: center;
            background-repeat: no-repeat;
            transition: all 0.5s;
            margin-right: 30px;
            cursor: pointer;
            img {
              // width: 100%;
              max-width: 100%;
              max-height: 100%;
              // border: 1px solid #e1e1e1;
              // border-radius: 15px;
            }
          }
          // 简介部分
          .summary_box {
            position: relative;
            flex: 3;
            // border: 1px solid red;
            line-height: 30px;
            h3 {
              cursor: pointer;
            }
            h3:hover {
              color: red;
            }
            // 发布者信息
            .publisher_box {
              display: flex;
              align-items: center;
              position: absolute;
              bottom: 0;
              // 头像
              .avatar_box {
                width: 30px;
                height: 30px;
                border: 1px solid #e1e1e1;
                border-radius: 50%;
                overflow: hidden;
              }
            }
          }
        }
      }
    }
  }
  // 右边盒子
  .right_box {
    flex: 1;
    // border: 1px solid blue;
    // height: 40px;
    border-radius: 5px;
    // 每个Item
    .pt {
      border: 1px solid blue;
      .item {
        margin-bottom: 20px;
      }
    }
  }

  .recommend {
    // border: 1px solid red;
    background-color: rgb(255 255 255 / 45%);
    width: 94%;
    border-radius: 10px;
    overflow: hidden;
    padding: 10px;
    .recommend-item-top1 {
      width: 100%;
      height: 150px;
      // border: 1px solid red;
    }
    .recommend-item-topS {
      display: flex;
      flex-flow: row;
      width: 100%;
      height: 100%;
      // border: 1px solid red;
      .item-topS-content {
        margin-left: 10px;
        display: flex;
        justify-content: space-between;
        flex-flow: column;
        .titleS {
          padding: 3px;
          font-size: 13px;
          font-weight: bold;
          color: rgb(69, 69, 69);
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .datetime {
          font-size: 12px;
        }
        .nickname {
          font-size: 12px;
        }
      }
      .item-topS-content {
        flex: 2;
      }
    }

    .recommend-item {
      overflow: hidden;
      border-radius: 10px;
      transition: all 0.5s;
      margin-bottom: 7px;
    }

    .item-topS-img {
      background-size: 150%;
      border-radius: 10px;
      flex: 1;
      height: 70px;
      width: 93px;
    }
    // 浮动图片放大
    .recomend-item-content {
      width: 94%;
      height: 50px;
      // border: 1px solid black;
      padding: 10px;
      display: flex;
      flex-flow: row;
      .content-avatar {
        width: 40px;
        height: 40px;
        img {
          width: 100%;
          height: 100%;
          border: 2px solid white;
          border-radius: 100%;
          overflow: hidden;
        }
      }
      .content-text {
        margin-left: 20px;
        color: white;
        font-weight: bold;
        font-size: 15px;
        white-space: nowrap;
        .title {
          max-width: 120px;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .summary {
          display: block;
          width: 240px;
          font-size: 13px;
          margin-top: 5px;
          font-weight: normal;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .datetime {
          color: rgb(204, 204, 204);
          font-size: 10px;
          margin-left: 10px;
        }
      }
    }
  }
  .image-style-cover {
    overflow: hidden;
    background-position: center;
    // background-size: contain;
    background-size: 100%;
    background-repeat: no-repeat;
    transition: 0.5s;
  }
  .mask {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    background: -webkit-linear-gradient(
      bottom,
      rgb(0, 0, 0) 0%,
      rgba(0, 0, 0, 0.5) 44%,
      rgba(51, 51, 51, 0) 99%
    );
  }
  .image-style-cover-1:hover {
    background-size: 104%;
  }
  .recommend-item-topS:hover .image-style-cover-2 {
    background-size: 165% !important;
  }
  .recommend-item-topS:hover .titleS {
    color: black !important;
  }
  .article_item:hover .img_box {
    background-size: 160% !important;
  }
  // 媒体查询 页面监控 width-size > 1150px
  @media screen and (max-width: 1200px) {
    .right_box {
      display: none;
    }
  }
}
</style>
